#app {
  .share_info {
    transform: translateY(-10rem);
    opacity: 0;
    &.open {
      transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
      opacity: 1;
      transform: none;
    }
    .container {
      display: flex;
      align-items: center;
      flex-flow: row wrap;
      .logo {
        flex: none;
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        transition: transform 0.3s ease-in-out;
        &:hover {
          box-shadow: 0 0 0.5rem var(--color5);
          transform: rotate(360deg) scale(1.2);
        }
      }
      .des {
        flex: none;
        max-width: 100%;
        padding-left: 1rem;
        line-height: 1.5;
        word-break: break-all;
        span {
          color: var(--icon-color);
        }
      }
    }
  }
  .file_box {
    transform: translateY(10rem);
    opacity: 0;
    &.open {
      transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
      opacity: 1;
      transform: none;
    }
    .container {
      line-height: 1.5;
      padding: 2rem 1rem;
      display: flex;
      align-items: center;
      flex-flow: row wrap;
      .name {
        padding: 0 1rem;
        word-break: break-all;
        &:hover {
          text-decoration: underline wavy;
          color: var(--text-hover-color);
        }
        .suffix {
          color: green;
        }
      }
      .logo {
        padding: 0.5rem;
        font-size: 3rem;
        color: var(--icon-color);
        img {
          max-width: 10rem;
          min-width: 5rem;
        }
      }
    }
  }
}
